<template>
		<view class=" mt-3" style="background-color: #FFFFFF;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;" >
		<view class="py-2" style="display:flex;justify-content: center;align-items: center;flex-direction: row;">
			<text class="p-1" style="font-weight: 600;color: #464646;font-size: 28rpx;">共 {{total}} 条评论</text>
		</view> 

		<view v-if="!comment_list.length" style="flex-direction: column;justify-content: center;align-items: center;flex: 1;">
			<!-- <em-empty type="comment"/> -->
			<text style="font-size: 30rpx;color: #999999;margin: 20rpx;">暂无评论</text>
		</view>
		<view class="flex-1 px-3"  v-for="(item,index) in comment_list"  :key="index" :data-index="index" v-if="!item.deleted">
			<view class=" py-1 flex flex-row align-start  border-light-secondary flex-1" >
				<!--  -->
				<view style="width: 70rpx;height: 70rpx;border-radius: 70rpx;">
					<image style="width: 70rpx;height: 70rpx;border-radius: 70rpx;" @click="usershop(item.User)" :src="config.imgUrl+item.User.avatar" ></image>
				</view>
				<view  class="ml-2 flex-1 flex flex-column border-bottom pb-2 flex-1" @longtap="long" >
					<text class="text-hover-primary mb-1" style="color: #A0A0A0;font-weight: 500;font-size: 32rpx;color: #88888B;">{{item.User.nickname}}</text>
					<text v-if="item.content" selectable="true" user-select="true" class="" style="font-size: 34rpx;">{{item.content}}</text>
					<view v-if="item.images" class="mb-1" style="flex-direction: row;justify-content: flex-start;flex-wrap: wrap;">
						<block v-for="(val,index) in item.images" :key="val"  @click="showImage(item.images,index)">
							<image v-if="val" :src="config.imgUrl+val" style="margin: 10rpx 0rpx;margin:2rpx;width: 142rpx;height: 142rpx;border-radius: 8rpx;" mode="aspectFill"/>
						</block>
					</view>
					<view class="flex flex-1 flex-row justify-between mt-1" >
						<view style="flex-direction: row;justify-content: flex-end;"> 
							<text style="font-size: 28rpx;color: #88888B;">{{item.createtime | timestampFormat}}</text>
							<text class="ml-1" @click.stop="doReply(item)"  style="font-size: 28rpx;color: #6F6F6F;">回复</text>
						</view> 
						<view style="flex-direction: row;">
							<view v-if="userInfo.id == item.uid" class="flex flex-row align-center justify-center pr-2" @click="delcomment(item)">
								<em-icon style="font-size: 32rpx;color: #E86262;line-height: 32rpx;" :unicode="'\uec2a'"></em-icon> 
								<text style="color: #E86262;font-size: 26rpx;margin-left: 5rpx;line-height: 26rpx;">删除</text>
							</view>
							<view class="flex flex-row align-center justify-center pr-2" @click="feedback(item)">
								<em-icon style="font-size: 32rpx;color: #AEACB9;line-height: 32rpx;" :unicode="'\ueca1'"></em-icon> 
								<text style="color: #AEACB9;font-size: 26rpx;margin-left: 5rpx;line-height: 26rpx;">举报</text>
							</view>
						</view>
					</view>
					<!-- 回复 -->
					<view style="background-color: #F4F4F4;" class="px-1 rounded mt-1">
						<block  v-for="(reply,index2) in item.reply_list"  :key="index2" :data-index="index2"  v-if="!item.deleted">
							<view class="flex align-start" style="margin-top: 20rpx;">
								<image   @click="usershop(reply.User)" class="reply-user-avatar" :src="config.imgUrl+reply.User.avatar" size="35"></image>
								<view class="pl-2 flex-1 flex flex-column" >
									<!-- <text class="font text-hover-primary mb-1" style="font-weight: 500;color: #848484;">{{reply.User.nickname}}</text> -->
									<text v-if="reply.content" selectable="true" user-select="true" style="font-size: 34rpx;" class="mb-1">{{reply.content}}</text>
									<view style="flex-direction: row;justify-content: flex-start;flex-wrap: wrap;" class="mb-1">
										<block v-for="(val,index) in item.images" :key="val"  @click="showImage(item.images,index)">
											<image v-if="val" :src="config.imgUrl+val" style="margin: 10rpx;width: 142rpx;height: 142rpx;border-radius: 20rpx;" mode="aspectFill"/>
										</block>
									</view> 
									<view class="flex align-center justify-between mb-1" >
										<view style="flex-direction: row;">
											<text style="font-size: 28rpx;color: #88888B;">{{item.createtime | timestampFormat}}</text>
											<text class="ml-1" @click.stop="feedback(reply)" style="font-size: 28rpx;color: #6F6F6F;">举报</text>
											<text class="ml-1" @click.stop="delcomment(reply)" v-if="userInfo.id == reply.uid" style="font-size: 28rpx;color: #6F6F6F;">删除</text>
										</view>
										<view style="flex-direction: row;justify-content: flex-end;" v-if="0"> 
											<view  :hover-stop-propagation="true" @click.stop="doLike(reply)" class="rounded p-1 bg-light cdone"  style="margin-right: 20rpx;flex-direction: row;justify-between;" >
												<n-icon style="margin: 0rpx 5rpx;font-size: 30rpx;line-height: 30rpx;"  class="user-id text-color text-light-muted" name="appreciate_fill_light" size="30" :style="{'color':reply.islike?'#FE6B6C':'#A9A5A0'}"></n-icon>
												<text style="margin: 0rpx 5rpx;font-size: 30rpx;line-height: 30rpx;" class="text-light-muted" :style="{'color':reply.islike?'#FE6B6C':'#A9A5A0'}">{{reply.like_count}}</text>
											</view> 
										</view> 
									</view>
								</view>
							</view>	
						</block>
					</view>
					<view v-if="item.left_comments_count>0" style="flex-direction: row;justify-content: flex-start;">
						<view  :hover-stop-propagation="true" @click.stop="doShowReply(item,item.reply_list)" 
						style="margin-top: 10rpx; margin-right: 20rpx;flex-direction: row;;" >
							<text style="margin: 0rpx 0rpx;font-size: 25rpx;line-height: 30rpx;color:#A9A5A0" >展开{{item.left_comments_count}}条回复</text>
							<em-icon style="margin: 0rpx 2rpx;font-size: 28rpx;line-height: 30rpx;color:#A9A5A0" :unicode="'\uea4e'"></em-icon>
						</view> 
					</view> 
				</view>	
			</view>	
		</view>			
		<view >
			<view style="height: 100rpx;"></view>
		</view>			
			<view v-if="0" :style="{'opacity':show_input?'0.1':'1','padding-bottom': safeAreaInsets + 'px',bottom:0}" @tap="send_comment(post_id)"  @touchmove.stop="stopFun"
			 style="width: 750rpx;justify-content: center;align-items: center;background-color: #FFFFFF;padding: 20rpx; 0rpx;position:absolute;">
				<view style="width: 650rpx;">
					<view style="flex-direction: row;justify-content: flex-start;margin: 10rpx 0rpx;flex: 1;flex-wrap: wrap;">
						<view v-for="val in imageList" :key="val" style="margin-right: 10rpx;margin-top: 10rpx;">
							<image :src="config.imgUrl+val" style="width: 110rpx;height: 110rpx;border-radius: 20rpx;" mode="aspectFill"/>
						</view>
					</view>
					<view style=" flex-direction: row;justify-content: space-between;">
						<view style="flex-direction: row;width: 80rpx;align-items: center;">
							<image style="height: 60rpx;width: 60rpx;border-radius: 15rpx;" :src="config.imgUrl + userInfo.avatar" mode="aspectFill"/>
						</view>
						<view class="" style="flex: 1;margin-right: 20rpx;">
							<text class="px-2 chat-input " style="background-color: #E8EAEC;">{{content?content:'说点什么...'}}</text>
						</view>
						<view style="flex-direction: row;align-items: center;display: flex;">
							<view @touchend.prevent="chooseImage" style="margin-right: 20rpx;">
								<em-icon style="font-size: 64rpx;height: 64rpx;line-height: 64rpx;color:#AEACB9"  :unicode="'\uee66'"></em-icon> 
							</view>
							<view>
								 <text @tap="tapSendChat" class="btn-send" :style="[$em.$getThemeStyle(['bg-color-mian'])]">发送</text> 
							</view>
						</view>
					</view>
				</view>
			</view>	
			<view @click="hideInput" v-if="show_input" style="position: absolute;top: 0rpx;bottom: 0rpx;left: 0rpx;right: 0rpx;background-color:rgba(0,0,0,0.3);"></view>
			<view v-if="show_input" :style="{bottom: chat_bottom + 'px'}" @touchmove.stop="stopFun" 
			style="width: 750rpx;justify-content: center;align-items: center;position: fixed;background-color: #FFFFFF;padding-bottom: 20rpx;">
				<view style="width: 690rpx;">
					<view style="flex-direction: row;justify-content: flex-start;margin: 10rpx 0rpx;flex: 1;flex-wrap: wrap;">
						<view v-for="val in imageList" :key="val" style="margin-right: 10rpx;margin-top: 10rpx;">
							<image :src="config.imgUrl+val" style="width: 110rpx;height: 110rpx;border-radius: 10rpx;" mode="aspectFill"/>
						</view>
					</view>
					<view style=" flex-direction: row;">
						<view class="" style="flex: 1; margin-right: 20rpx;">
							<input class="chat-input px-2" style="background-color: #E8EAEC;" :placeholder="placeholder" focus cursor-spacing="8" 
							:adjust-position="false" v-model="content"
							 confirm-type="done" type="text" />
						</view>
						<view style="flex-direction: row;flex-direction: row;align-items: center;display: flex;">
							<view @touchend.prevent="chooseImage" style="margin-right: 20rpx;">
								<em-icon style="font-size: 64rpx;height: 64rpx;line-height: 64rpx;color:#AEACB9" :unicode="'\uee66'"></em-icon> 
							</view>
							<view>
								 <text @tap="tapSendChat" class="btn-send" :style="[$em.$getThemeStyle(['bg-color-mian'])]">发送</text> 
<!-- 								<em-icon style="font-size: 22rpx;" class="btn-send" :style="[$em.$getThemeStyle(['color-4']),$em.$getThemeStyle(['bg-color-103'])]" :unicode="'\uf0d8'"></em-icon>
 -->							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import {
	  mapState
	} from 'vuex'
	
	let app = {}
	// #ifdef MP-WEIXIN
	app = getApp({
	  allowDefault: true
	}).$vm
	// #endif
	// #ifndef MP-WEIXIN
	app = getApp({
	  allowDefault: true
	})
	// #endif
	
	export default {
		components: {
		},
		props: {
			item: Object,
			index:Number,
			pid:Number,
			to_user_id:Number,
		},
		watch:{
			pid(newVal,oldVal){
				this.getCommentList({
					pid:this.pid,
					time:0,
				}); 
				console.log('111')
			}
		},
		filters:{
			timestampFormat(timestamp){
				let curTimestamp = parseInt(new Date().getTime() / 1000), //当前时间戳
				timestampDiff = curTimestamp - timestamp, // 参数时间戳与当前时间戳相差秒数
				curDate = new Date( curTimestamp * 1000 ), // 当前时间日期对象
				tmDate = new Date( timestamp * 1000 ),  // 参数时间戳转换成的日期对象
				Y = tmDate.getFullYear(), 
				m = tmDate.getMonth() + 1, d = tmDate.getDate(),
				H = tmDate.getHours(), i = tmDate.getMinutes(), 
				s = tmDate.getSeconds();
				if ( timestampDiff < 60 ) { // 一分钟以内
					return "刚刚";
				} else if( timestampDiff < 3600 ) { // 一小时前之内
					return Math.floor( timestampDiff / 60 ) + "分钟前";
				} else if ( curDate.getFullYear() == Y && curDate.getMonth()+1 == m && curDate.getDate() == d ) {
					return '今天 ' + ((String(H).length == 1 ? '' : '') + H) + ':' + ((String(i).length == 1 ? '0' : '') + i);
				} else {
					var newDate = new Date( (curTimestamp - 86400) * 1000 ); // 参数中的时间戳加一天转换成的日期对象
					if ( newDate.getFullYear() == Y && newDate.getMonth()+1 == m && newDate.getDate() == d ) {
						return '昨天 ' + ((String(H).length == 1 ? '' : '') + H) + ':' + ((String(i).length == 1 ? '0' : '') + i);
					} else if ( curDate.getFullYear() == Y ) {
						return  ((String(m).length == 1 ? '' : '') + m) + '月' + ((String(d).length == 1 ? '0' : '') + d) + '日 '  ;
					} else {
						return  Y + '年' + ((String(m).length == 1 ? '' : '') + m) + '月' + ((String(d).length == 1 ? '0' : '') + d) + '日 ' + ((String(H).length == 1 ? '' : '') + H) + ':' + ((String(i).length == 1 ? '0' : '') + i);
					}
				}
			}
		},
		computed:{
			...mapState([
				'systemInfo',
				'config',
				'userInfo',
			]),
			getMenusHeight(){
				let H = 100
				return this.menusList.length * H
			},
			getMenusStyle(){
				return `height: ${this.getMenusHeight}rpx;`
			},
		},
		data() {
			return {
				chat_bottom: 0,
				safeAreaInsets:0,
				show_input:false,
				comment_list:"",
				like_list:[],
				content:"",
				btoff:true,
				placeholder:'说点什么...',
				related_id:0,
				imageList:[],
				menusList:[],
				parent_id:0,
				total:0,
				confirmBtns:{
					iconUnicode: '\uec2a',
					styles: {
					  btn: app.$getThemeStyle(['bg-color-101']),
					  icon: app.$getThemeStyle(['color-102'])
					}
				}
			}
		},
		created() {
			 this.$em = app.$em
			let _sysInfo = this.systemInfo
			this.safeAreaInsets = _sysInfo.safeAreaInsets.bottom || 10
			let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight;
			uni.$on('onKeyboard_height_change',res =>{
				if (this.show_input) {
					if (res.height <= 1) {
						this.chat_bottom = 0;
						this.show_input = false;
						this.parent_id = 0;
						this.placeholder = ''; 
					} else {
						let _diff = res.height - _heightDiff;
						this.chat_bottom = _diff > 0 ? _diff : 0;
						this.show_input = true;
					}
				}
			});
			// this.getLikeList();
			if(this.pid){
				this.getCommentList({
					pid:this.pid,
					time:0,
				}); 
			}
		},
		methods: {
			showImage(images,index = 0){
				let urls = [...images]
				urls.map((val,index)=>{
					urls[index] = this.config.imgUrl + val
				})
				console.log(urls)
				uni.previewImage({
					current:index,
					urls: urls
				})
			},
			feedback(item){
				app.$navigateTo('/pages/report/report?content='+`投诉主题：${item.content} - ${item.id}\n原因:`)
			},
			isShowPopup(){
				return this.$refs.comment.showPopup
			},
			usershop(user){
				app.$navigateTo(`/pages/user/index?user_id=${user.id}`)
				//this.$refs.comment.show()
			},
			show(){
				this.$refs.comment.open()
			},
			hide(){
				this.$refs.comment.close()
			},
			preview(item,src){
				let imgs = [src];
				for(let i = 0;i< item.length;i++){
					imgs.push(this.ossUrl+"/"+item[i]);
				}
				uni.previewImage({
					current:src,
					urls:imgs
				})
			},
			async doLike(item){
					let _this = this;
					const res = await uni.$http.post("/im/action/setLike", {
						related_id: item.id,
					})
					item.islike = data.is_ok;
					if(data.is_ok){
						item.like_count+=1;
					}else{
						item.like_count-=1;
					}
			},
			clickEvent(e){
				 let _this = this;
					if (_this.btoff) {
				        _this.btoff = false;
				        setTimeout(function () {
				            _this.btoff = true;
				        }, 500)
				    } else {
				    	return;
				    }
				let event = e.event;
				this.$refs.extend.hide();
			},
			async doShowReply(item,reply_list){
				let _this = this;
				let params = {
						parent_id:item.id,
						time:0,
					}
				const res = await uni.$http.post("/api/comment/circlelist", params)
					res.rows.map((item,index)=>{
						item.deleted = false;
					})
					console.log(res);
					item.left_comments_count -= res.rows.length;
					if(params.time>1){
						item.reply_list = item.reply_list.concat(res.rows);
					}else{
						if(res.rows){
							item.reply_list = res.rows;
						}
					}
				console.log(item)
			},
			doReply(item){
				console.log(item);
				this.parent_id = item.id;
				this.placeholder = "回复：@"+item.User.nickname; 
				this.showInput(item.id); 
			},
			send_comment(id){
				this.related_id = id;
				this.showInput();
			},
			showInput(){
				this.show_input = !this.show_input;
			},
			async getLikeList(){
				let _this = this;
				const res = await uni.$http.post("/im/Lists/getLikeList", {related_id:this.post_id})
				if(res.data.data){
					this.like_list = res.data.data;
				}
			},
			async getCommentList(params){
				//console.log(this.post_id)
				let _this = this;
				const res = await uni.$http.post("/api/comment/circlelist", params)
				this.total = this.total || res.total
				res.rows.map((item,index)=>{
					item.deleted = false;
				})
				console.log("circlelist",res)
					if(params.time>1){
						_this.comment_list = _this.comment_list.concat(res.rows);
					}else{
						if(res.rows){
							this.comment_list = res.rows;
						}
					}
			},
			 delcomment(item){
				let _this = this;
				this.$refs.confirm_v1.open({
					title:"确定要删除吗?",
					duration:15000,
					confirm:()=>{
						uni.$http.post("/api/comment/del", {id:item.id})
						.then((res)=>{
							item.deleted = true
							uni.showToast({
								icon:'none',
								title: "已删除",
								duration: 2000
							});
						})
					}			  
				})
				
				
				
			},
			more:function(){
				console.log(111)
			},
			async upload(path,type="images"){
				const res = await uni.$http.upload("/api/user/upload",{},path)
				if(!res.data)return;
				if(type == 'images'){
					this.imageList.push(res.data.url)
				}
				
				console.log("res",this.imageList)
			},
			chooseImage(){
				let _this = this;
				uni.chooseImage({
					sourceType:['album'],
					success: (res)=>{
						res.tempFilePaths.map((val)=>{
							_this.upload(val)
						})
					}
				});
			},
			
			hideInput(){
				this.showInput();
				uni.hideKeyboard();
			},
			 tapSendChat: async function() {
				let _this = this;
				if(!this.content && !this.imageList.length){
					uni.hideKeyboard(); 
					return;
				}
				this.showInput();
				uni.hideKeyboard(); 
				//let msg = {text:this.content,value:this.imageList};
				const res = await uni.$http.post("/api/comment/circlecreate", {
						pid:this.parent_id ? 0 : this.pid,
						parent_id:this.parent_id,
						content:this.content,
						images:this.imageList.join(","),
				})
				this.getCommentList({
					pid:this.pid,
					time:0,
				}); 
				this.imageList = [];
				this.content = "";
				this.parent_id = 0;
				uni.hideKeyboard(); 
			},
			long({x,y,index}){
				// 初始化 索引
				console.log(111)
				this.propIndex = index
				let menus = [{ 
					name:"举报",
					event:'report'
				}]
				this.menusList = menus
				// 显示扩展菜单
				this.$refs.extend.show(x,y)
			},
		}
	}
</script>

<style scoped>
	.btn-send {
		border-radius: 15rpx;font-size: 22rpx;color: #FFFFFF;height: 54rpx;line-height: 54rpx;width: 100rpx;text-align: center;
	}
	
	.chat-body {
		position: fixed;width: 750rpx;padding: 10rpx; background-color: #FFFFFF;
	}
	
	.chat-input {
		background-color: #F2EEEE;
		border-radius: 15rpx; 
		font-size: 26rpx;
		height: 66rpx;
		line-height: 66rpx;
	}
	.user-avatar{
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
	}
	
	.reply-user-avatar{
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
	}
	.border-bottom{
		border-bottom-width: 0px;
		border-style: solid;
	}
</style>
